import "./App.css";
import NavTop from "./components/nav-top";
import NavLeft from "./components/nav-left";
import tu from "./images/17.jpeg";
import { Outlet } from "react-router-dom";

function App() {
  return (
    <>
      <div
        //最外层盒子样式
        className=" w-screen h-screen flex flex-col"
        style={{
          backgroundSize: "100% 100%",
          backgroundImage:
            "url(https://images.pexels.com/photos/457881/pexels-photo-457881.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2)",
        }}
      >
        {/* 顶部导航栏 */}
        <div className="top w-screen h-12 flex">
          <div
            className=" bg-slate-100/50"
            style={{
              display: "flex",
              alignItems: "center",
              borderBottom: "1px solid #cecece",
              width: "16.58%",
            }}
          >
            <img
              src={tu}
              alt=""
              style={{ height: "100%", borderRadius: "100%" }}
            />
            <p>欢迎回来，小小白</p>
          </div>

          {/* antd组件库导航组件 */}
          <NavTop></NavTop>
        </div>
        <div className="main w-screen   flex-1 flex">
          <div className="lef w-1/6">
            <NavLeft></NavLeft>
          </div>

          {/* 右侧内容区 */}
          <div className="rig flex-1">
            <Outlet></Outlet>
          </div>
        </div>
      </div>
    </>
  );
}

export default App;
